<template>
    <div class="my">
        <!-- 导航 -->
        <van-nav-bar title="我的" />
        <!-- 头像 -->
        <div class="header">
            <van-image round width=".9rem" height=".9rem" src="https://img01.yzcdn.cn/vant/cat.jpeg" />
            <span>天下雪</span>
        </div>
        <!-- 主体 -->
        <div class="user">
            <van-cell is-link @click="showPopup">我的收藏</van-cell>
            <van-popup v-model="show"></van-popup>

            <van-cell is-link @click="showPopup">我的订单</van-cell>
            <van-popup v-model="show"></van-popup>

            <van-cell is-link @click="showPopup">我的地址</van-cell>
            <van-popup v-model="show"></van-popup>

            <van-cell is-link @click="showPopup">联系客服</van-cell>
            <van-popup v-model="show"></van-popup>

            <van-cell is-link @click="showPopup">关于我们</van-cell>
            <van-popup v-model="show"></van-popup>
        </div>

        <!-- 退出 -->
        <van-button type="default"><span>退出</span></van-button>

        <!-- footer -->
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">活动</van-tabbar-item>
            <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Image as VanImage, Cell, CellGroup, Button, Tabbar, TabbarItem, Popup } from 'vant';


Vue.use(VanImage);
Vue.use(NavBar);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Popup);

export default {
    data () {
        return {
            active: 0,
            show: false,
        };
    },

    methods: {
        showPopup () {
            this.show = true;
        },
    },
};
</script>

<style lang="scss" scoped>
.my {
    width: 100%;
    height: 100%;
    background: #ececec;

    .van-nav-bar {
        width: 100%;
        height: 0.42rem;
        background: rgb(105, 195, 170);
        text-align: center;
    }

    .header {
        width: 100%;
        height: 1.72rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0.2rem;
        background: #fff;

        span {
            font-size: 0.18rem;
            line-height: 0.62rem;
        }
    }

    .user {
        margin-top: 0.1rem;

        .van-cell {
            height: 0.32rem;
            font-size: 0.14rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .van-button {
        margin-top: 0.1rem;
        width: 100%;
        height: 0.45rem span {
            font-size: 0.18rem;
        }
    }
}
</style>
